<template>
	<view class="wrap" style="height: 100vh; background-color: #FFFFFF;">
		<u-navbar title-color="#FFFFFF" height="48" back-icon-color="#FFFFFF" :border-bottom="false" :is-fixed="true"  :title="'修改昵称'">
			<view slot="right" style="margin-right: 15px;">
				<u-button type="primary" size="mini" :disabled="!saveStatus" @click="updateUserInfo">保 存</u-button>
			</view>
		</u-navbar>
		<view class="content" style="padding: 0 15px;">
			<u-form :model="userForm" ref="userForm">
				<u-form-item label="昵称"><u-input v-model="userForm.nickName" placeholder="请输入新的昵称"/></u-form-item>
			</u-form>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userForm:{
					nickName:''
				},
				saveStatus:false,
				oldNickName:'',
			}
		},
		onLoad() {
			this.userForm.nickName = this.$store.getters.userInfo.nickName
		},
		methods: {
			updateUserInfo(){
				this.utils.request("/api/app/user/updateInUser",this.userForm,"post","app",true).then(res=>{
					this.$refs.uToast.show({
						title: '昵称更新成功',
						type: 'success',
						url: '',
						back: true
					})
				}).catch(error=>{
					this.$refs.uToast.show({
						title: '昵称更新失败',
						type: 'error',
						url: ''
					})
				})
			}
		},
		watch:{
			userForm:{
			    handler(newValue, oldValue){
			    	this.saveStatus = !(this.userForm.nickName==null||this.userForm.nickName=='')
			    },
			    //对象的深度监听deep，默认为false不进行深度监听
			    deep: true
			}
		}
	}
</script>

<style>

</style>
